<template>
  <div class="box">
    <div class="date" v-html="date"></div>
    <div class="week" v-html="week"></div>
    <div class="time" v-html="time"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      date: '', // 绑定的-日期 文本内容
      week: '', // 绑定的-星期几 文本内容
      time: '', // 绑定的-时间 文本内容
      weekNum: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
      newDate: new Date(), // 取当前服务器时间
      SerDateTimer: null, // 获取服务器时间定时器
    }
  },
  mounted() {
    // 获取服务器时间定时器
    this.SerDateTimer = setInterval(() => {
      this.newDate = new Date()
    }, 1000 * 60 * 5)
    // 时间自增定时器
    this.SerDateTimer = setInterval(() => {
      this.dateTime()
    }, 1000)
  },
  methods: {
    dateTime() {
      let year = this.newDate.getFullYear() // 获取年份
      let month = this.toDouble(this.newDate.getMonth() + 1) // 获取月份
      let day = this.toDouble(this.newDate.getDate()) // 获取那一天
      let hour = this.toDouble(this.newDate.getHours()) // 获取小时
      let minute = this.toDouble(this.newDate.getMinutes()) // 获取分钟
      let second = this.toDouble(this.newDate.getSeconds()) // 获取秒
      let week = this.newDate.getDay() // 获取星期几
      this.newDate.setTime(this.newDate.getTime() + 1000)
      this.date = year + '年' + month + '月' + day + '日'
      this.week = this.weekNum[week]
      this.time = hour + ':' + minute + ':' + second
    },
    toDouble(num) {
      let number = num
      if (num >= 0 && num <= 9) { number = '0' + num }
      return number
    }
  },
  // 组件销毁前清楚定时器
  destroyed() {
    clearInterval(this.SerDateTimer)
  }
}
</script>

<style scoped>
.box {
  width: 19%;
  height: 50px;
  font-size: 18px;
  font-weight: bold;
  line-height: 50px;
  padding-right: 10px;
  display: flex;
  justify-content: space-between;
  color: #888;
  border: 1px solid red;
}
</style>